<template>
	<view class="template-edit tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
		
    <view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
        <view class="tn-flex justify-content-item">
          <view class="tn-bg-black tn-color-white tn-text-center" style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
            <text class="tn-icon-topics" style="font-size: 30rpx;"></text>
          </view>
          <view class="tn-text-lg tn-padding-right-xs tn-text-bold">想说点什么</view>
        </view>
        <view class="justify-content-item tn-text-df tn-color-grey">
          <text class="tn-padding-xs">500字内</text>
          <text class="tn-icon-keyboard-circle"></text>
        </view>
      </view>
      
      <!-- <view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
      	<input placeholder="写下一句简短的标题" name="input" placeholder-style="color:#AAAAAA" ></input>
      </view> -->
      <view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
        <textarea v-model="formData.record" maxlength="500" placeholder="说点什么 , 万一火了呢"
          placeholder-style="color:#AAAAAA"></textarea>
      </view>
      
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
        <view class="tn-flex justify-content-item">
          <view class="tn-bg-black tn-color-white tn-text-center" style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
            <text class="tn-icon-image" style="font-size: 30rpx;"></text>
          </view>
          <view class="tn-text-lg tn-padding-right-xs tn-text-bold">发点什么图咧</view>
        </view>
        <view class="justify-content-item tn-text-df tn-color-grey" @tap="clear">
          <text class="tn-padding-xs">清空上传</text>
          <text class="tn-icon-delete"></text>
        </view>
      </view>
      
      <view class="tn-margin-left tn-padding-top-xs">
        <tn-image-upload-drag
          ref="imageUpload"
          :action="action"
          :width="236"
          :height="236"
          :header="formHeader"
          :formData="formData"
          :fileList="fileList"
          :disabled="disabled"
          :autoUpload="autoUpload"
          :maxCount="maxCount"
          :showUploadList="showUploadList"
          :showProgress="showProgress"
          :deleteable="deleteable"
          :customBtn="customBtn"
          @sort-list="onSortList"
          @on-uploaded="uploaded"
          @on-success="uploadSuccess"
          @on-change="uploadChange"
        />
      </view>
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
        <view class="tn-flex justify-content-item">
          <view class="tn-bg-black tn-color-white tn-text-center" style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
            <text class="tn-icon-location" style="font-size: 30rpx;"></text>
          </view>
          <view class="tn-text-lg tn-padding-right-xs tn-text-bold">打卡地点</view>
        </view>
        <view @click="showShopMod()"  class="justify-content-item tn-text-df tn-color-grey">
          <text class="tn-padding-xs">{{selectShop.title}}</text>
          <text class="tn-icon-right"></text>
        </view>
      </view>
      
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
        <view class="tn-flex justify-content-item">
          <view class="tn-bg-black tn-color-white tn-text-center" style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
            <text class="tn-icon-tag" style="font-size: 30rpx;"></text>
          </view>
          <view class="tn-text-lg tn-padding-right-xs tn-text-bold">话题标签</view>
        </view>
        <view @click="showTagMod()" class="justify-content-item tn-text-df tn-color-grey">
          <text class="tn-padding-xs">选择</text>
          <text class="tn-icon-right"></text>
        </view>
      </view>
      
      <view class="tn-tag-content tn-margin tn-text-justify tn-padding-bottom">
        <view v-for="(item, index) in tagList" :key="index" 
        class="tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" 
        :class="[`tn-bg-${colors[index]}--light tn-color-${colors[index]}`]">
          <text class="tn-tag-content__item--prefix">#</text> {{ item }}
        </view>
      </view>  
      
      <!-- 悬浮按钮-->
      <view class="tn-flex tn-footerfixed">
        <view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
          <tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="60%" shadow fontBold @tap="upload">
            <!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
            <text class="tn-color-black">打 卡</text>
            <text class="tn-icon-camera tn-padding-left-xs tn-color-black"></text>
          </tn-button>
        </view>
      </view>
      
    </view>
    
    <view class='tn-tabbar-height'></view>
    <tn-popup
      v-model="showCom2" 
      :borderRadius="23"
      :closeBtn="true"
      :maskCloseable="true"
      mode="bottom" >
      <view class="popup-content">
        <view class="tn-picker__content">
          <!-- 顶部 -->
          <view 
          class="tn-picker__content__header tn-border-solid-bottom" 
          @touchmove.stop.prevent>
            <!-- 取消按钮 -->
    
            <!-- 标题 -->
            <view class="tn-picker__content__header__title"></view>
            <!-- 确认按钮 -->
    
          </view>
          <!-- 主体 -->
          <view class="tn-picker__content__body">
            <scroll-view scroll-y="true" class="scroll-Y labels-scroll-view">
              <view class="tn-flex tn-flex-wrap tn-shops-container">
                <block v-for="(item, index) in shopList" :key="index">
                  <tn-list-cell :arrow="false"  @click="selShop(item)">
                    <view class="list-image-text">
                      <view class="list__left">
                        <view class="list__left__text">{{item.title}}</view>
                      </view>
                    </view>
                  </tn-list-cell>
                </block>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </tn-popup>
    <tn-popup
      v-model="showCom" 
      :borderRadius="23"
      :closeBtn="true"
      :maskCloseable="true"
      mode="bottom" >
      <view class="popup-content">
        <view class="tn-picker__content">
          <!-- 顶部 -->
          <view 
          class="tn-picker__content__header tn-border-solid-bottom" 
          @touchmove.stop.prevent>
            <!-- 取消按钮 -->
    
            <!-- 标题 -->
            <view class="tn-picker__content__header__title"></view>
            <!-- 确认按钮 -->
    
          </view>
          <!-- 主体 -->
          <view class="tn-picker__content__body">
            <scroll-view scroll-y="true" class="scroll-Y labels-scroll-view">
              <view class="tn-flex tn-flex-wrap tn-labels-container">
                <view
                  @click="showAddTag()"
                  class="tn-flex tn-three tn-flex-col-center tn-flex-row-center">
                  <view class="tn-margin-left-xs tn-flex tn-flex-col-center tn-flex-row-center tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
                    <view class="tn-label-tag tn-label-add">
                      <text class="tn-icon tn-icon-add"></text>
                    </view>
                  </view>
                </view>
                <view class="tn-flex tn-three tn-flex-col-center tn-flex-row-center" v-for="(item, index) in commentTags" 
                  :key="index" >
                  <view 
                    @click="postLabel(item.label)"
                    class="tn-tag-content__item tn-margin-left-xs tn-flex tn-flex-col-center tn-flex-row-center tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
                    <view class="tn-label-tag" :class="[`tn-bg-${colors[index]}--light tn-color-${colors[index]}`]">
                      {{item.label}}
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </tn-popup>
    <tn-modal 
      v-model="showModel" 
      :showCloseBtn="true"
      title="自定义文字表情" :custom="true">
      <view class="custom-modal-content">
        <view>
          <tn-input v-model="labelForm" 
          maxLength="12"
          type="text" :border="true" :autoHeight="true" />
        </view>
        <view>
          <tn-button :shadow="true" 
          width="100%" 
          height="80rpx" 
          @click="addTag()"
          backgroundColor="tn-bg-indigo" 
          fontColor="#FFFFFF" margin="10rpx 0">确认</tn-button>
        </view>
      </view>
    </tn-modal>
    <tn-toast ref="toast"></tn-toast>
	</view>
</template>

<script>
  import { getNearRestaurants, 
  getRestaurantInfo, postRestaurantRecord } from '@/libs/js/home.js';
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import { commentTags, colors } from '@/libs/constant.js'
	export default {
    name: 'TemplateEdit',
    mixins: [template_page_mixin],
		data() {
			return {
        shopQuery: {
          id: 0,
        },
        colors,
        selectShop: {},
        commentTags: commentTags,
        tagList: [],
				action: 'https://dinerapi.hiotk.com/eat/api/oss/upload',
				// action: '',
				formData: {
				  file: null
				},
        showModel: false,
        showCom2: false,
        labelsMap: {},
        labelForm: '',
        showCom: false,
        formHeader: {
        	'token': this.$store.state.token,
          'xversion': 'v1.5'
        },
				fileList: [
          // {url: 'https://tnuiimage.tnkjapp.com/shop/bag1.jpg'}, 
          // {url: 'https://tnuiimage.tnkjapp.com/shop/bag2.jpg'}, 
          // {url: 'https://tnuiimage.tnkjapp.com/shop/cup1.jpg'}, 
          // {url: 'https://tnuiimage.tnkjapp.com/shop/cup2.jpg'},
        ],
        formData: {
          albums: '',
          lat: '',
          lng: '',
          record: '',
          restaurantsLabels: '',
          restaurantsId: ''
        },
        shopList: [],
        uploading: false,
				showUploadList: true,
				customBtn: false,
				autoUpload: false,
				showProgress: false,
				deleteable: true,
				customStyle: false,
				maxCount: 9,
				disabled: false,
			}
		},
		onLoad(options) {
      const id = options.id || 0;
      this.resetForm();
      if(id){
        this.shopQuery.id = id;
        this.getInfo(id)
      }else{
        this.getNearRestaurants();
      }
		},
		methods: {
      getNearRestaurants() {
        const that = this;
        uni.getLocation({
        	type: 'wgs84',
          timeout: 1,
        	success: function(res) {
            console.log(res);
        		that.shopQuery.lng = res.longitude;
        		that.shopQuery.lat = res.latitude;
            that.formData.lng = res.longitude;
            that.formData.lat = res.latitude;
            getNearRestaurants(that.shopQuery).then(res => {
              if(res.code === 0){
                console.log(res);
                if(res.data.list.length){
                  const t = res.data.list.map(r => {
                  	return {
                  		title: r.name,
                  		address: r.addresses,
                  		image: r.albums ? JSON.parse(r.albums)[0].url : '',
                  		restaurantsLikeBo: r.restaurantsLikeBo,
                  		...r
                  	}
                  })
                  that.shopList = t;
                  that.selectShop = that.shopList[0]
                }
              }
            })
        	},
        	fail: function() {
            console.log('faile')
        	}
        })
      },
      getInfo(id){
        const that = this;
        uni.getLocation({
        	type: 'wgs84',
          timeout: 1,
        	success: function(res) {
        		that.shopQuery.lng = res.longitude;
        		that.shopQuery.lat = res.latitude;
            that.formData.lng = res.longitude;
            that.formData.lat = res.latitude;
            console.log(res);
        		that.getRes();
        	},
        	fail: function() {
            console.log('faile')
        	}
        })
      },
      getRes() {
        getRestaurantInfo(this.shopQuery).then(res => {
          if(res.code === 0){
            this.selectShop = res.data;
            this.selectShop.title = res.data.name;
            this.selectShop.image = res.data.albums ? JSON.parse(res.data.albums)[0].url : '';
            console.log(this.selectShop);
          }
        })
      },
      resetForm() {
        this.formData = {
          albums: '',
          lat: '',
          lng: '',
          record: '',
          restaurantsLabels: '',
          restaurantsId: ''
        };
        this.tagList = [];
        this.fileList = [];
      },
      showShopMod() {
        this.showCom2 = true;
      },
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
      postLabel(label) {
        this.tagList.push(label);
        this.showModel = false;
        this.showCom = false;
      },
      uploadForm() {
        this.formData.albums = this.fileList.map(r => r.url).join(',');
        this.formData.restaurantsLabels = JSON.stringify(this.tagList);
        this.formData.restaurantsId = this.selectShop.id;
        
        postRestaurantRecord(this.formData).then(res => {
          console.log(res);
          uni.hideLoading();
          uni.navigateBack();
          this.uploading = false;
        })
      },
      selShop(shop){
        this.selectShop = shop;
        this.showCom2 = false;
      },
      // 手动上传文件
      upload() {
        if(this.uploading) return;
        this.uploading = true;
        uni.showLoading({
        	title: '打卡中'
        });
        this.$refs.imageUpload.upload()
      },
      showTagMod() {
        this.showCom = true;
      },
      // 手动清空列表
      clear() {
        this.$refs.imageUpload.clear()
      },
      uploaded(lists, index) {
        console.log('全部上传文件处理完成', lists, this.fileList, index);
        
        this.uploadForm();
      },
      uploadSuccess(data, currentIndex, lists, index) {
        console.log('文件上传成功', data, currentIndex, lists, index);
      	
        if(data.msg === 'success'){
      		this.fileList.push({
            url: data.data.src
          })
      	}
      },
      uploadChange(res, currentIndex, lists, index) {
        console.log('文件上传信息有变', res, currentIndex, lists, index);
      },
      // 图片拖拽重新排序
      onSortList(list) {
        console.log(list);
      },
      addTag() {
        if(this.labelForm && this.labelForm.length <= 4){
          this.tagList.push(this.labelForm.toString());
          this.labelForm = ''
          this.showModel = false;
          this.showCom = false;
        }else{
          this.$refs.toast.show({
            title: '',
            content: '请输入，不超过4位',
            icon: '',
            image: '',
            duration: 1500
          });
        }
      },
      showAddTag() {
        this.showModel = true;
      },
		}
	}
</script>

<style lang="scss" scoped>
	.template-edit{
	}
  .popup-content{
    .tn-picker {
      &__content {
        position: relative;
        .tn-three{
          width: 33.333333%;
        }
        .tn-label-add{
          background-color: #333;
          color: #F4f4f4;
        }
        &__header {
          position: relative;
          display: flex;
          flex-direction: row;
          width: 100%;
          height: 90rpx;
          padding: 0 40rpx;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          font-size: 30rpx;
          background-color: #FFFFFF;
          
          &__btn {
            padding: 16rpx;
            box-sizing: border-box;
            text-align: center;
            text-decoration: none;
          }
          
          &__title {
            color: $tn-font-color;
          }
          
          &--cancel {
            color: $tn-font-sub-color;
          }
          
          &--confirm {
            color: $tn-main-color;
          }
        }
        .labels-scroll-view{
          height: 100%;
        }
        
        
        &__body {
          width: 100%;
          height: 500rpx;
          padding: 20rpx;
          overflow-y: hidden;
          background-color: #FFFFFF;
          .tn-label-tag{
            white-space: nowrap;
            font-size: 40rpx;
            border-radius: 10rpx;
            line-height: 50rpx;
            text-align: center;
            padding: 10rpx 20rpx;
            width: 200rpx;
          }
          .tn-labels-container{
            overflow: scroll;
          }
          .tn-shops-container{
            .list {
              &__left {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                
                &__icon, &__image {
                  margin-right: 18rpx;
                }
              }
              
              &__right {
                display: flex;
                align-items: center;
                justify-content: flex-end;
              }
            }
            
            .list-icon-text, .list-image-text {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
            
            .list-image-text {
              .list {
                &__left {
                  &__image {
                    width: 20rpx;
                    height: 20rpx;
                  }
                }
              }
            }
          }
          &__view {
            height: 100%;
            box-sizing: border-box;
          }
          
          &__item {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;
            color: $tn-font-color;
            padding: 0 8rpx;
            
            &--text {
              font-size: 24rpx;
              padding-left: 8rpx;
            }
          }
        }
      }
    }
  }
  
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }
  
  /* 底部悬浮按钮 start*/
  .tn-tabbar-height {
  	min-height: 100rpx;
  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  }
  .tn-footerfixed {
    position: fixed;
    width: 100%;
    bottom: calc(30rpx + env(safe-area-inset-bottom));
    z-index: 1024;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
    
  }
  /* 底部悬浮按钮 end*/
  
  /* 标签内容 start*/
  .tn-tag-content {
    &__item {
      display: inline-block;
      line-height: 45rpx;
      padding: 10rpx 30rpx;
      margin: 20rpx 20rpx 5rpx 0rpx;
      
      &--prefix {
        padding-right: 10rpx;
      }  
    }
  }
  /* 标签内容 end*/
</style>
